<template>
    <div>
        <el-row class="login-page-head">Header</el-row>
        <el-row class="login-page-main">
            <el-col :span="13"
                    class="section">
                <h1> 这里是广告的位置 </h1>
            </el-col>
            <el-col :span="6">
                <el-card class="section login-form">
                    <el-form :model="form"
                             label-width="80px">
                        <el-form-item label="Account">
                            <el-input v-model="form.account"></el-input>
                        </el-form-item>
                        <el-form-item label="Password">
                            <el-input v-model="form.pwd"
                                      type="password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-alert title="登录失败"
                                      v-show="loginfailed"
                                      type="error">
                            </el-alert>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success"
                                       @click="onLoginConfirm">Login</el-button>
                            <el-button type="text"
                                       @click="onResetClick">Reset</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
        <el-row class="login-page-footer">
            footer
        </el-row>
    </div>
</template>
<script>
    import md5 from 'js-md5'
    export default {
        data () {
            return {
                form: {
                    account: '',
                    pwd: ''
                },
                loginfailed: false
            }
        },
        methods: {
            onLoginConfirm () {
                let json = { 'name': this.form.account, 'pwd': md5(this.form.pwd) }
                this.$axios.post(this.$api.API_LOGIN, json).then(res => {
                    if (res.status === 200) {
                        this.onResetClick()
                        document.cookie = 'token=' + res.data.token.$uuid
                        document.cookie = 'acd=' + res.data.uname
                        this.$router.push('/home')
                    }
                }).catch(e => {
                    this.loginfailed = true
                    let vm = this
                    setTimeout(function () {
                        vm.loginfailed = false
                        vm.onResetClick()
                    }, 1000);
                })
            },
            onResetClick () {
                this.loginfailed = false
                this.form.account = ''
                this.form.pwd = ''
            }
        }
    }
</script>
<style scope>
.login-page-head {
    margin: 0px;
    height: 200px;
    background-color: royalblue;
}

.login-page-footer {
    margin: 0px;
    height: 200px;
    background-color: royalblue;
}

.login-page-main {
    display: flex;
    align-items: center;
    margin-bottom: 200px;
    margin-top: 90px;
    background-color: royalblue;
}

.login-form {
    width: 400px;
}
</style>
